<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 3000px;
        }
        .box {
            position: relative;
            margin: 400px auto;
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            text-align: center;
            line-height: 200px;
            transform-style: preserve-3d;
            animation: move 3s linear infinite, zx 3s linear infinite;
            /* border-radius: 50% */
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            /* background: url(media/小女孩.gif) no-repeat ; */
            opacity: 0.8;
            z-index: 999;
            /* border-radius: 50% */
        }
        .box div:nth-child(1) {
            /* background: url(media/小女孩.gif) no-repeat; */
            background-color: yellow;
            transform: translate3d( 0, 100px, 500px);
        }
        .box div:nth-child(2) {
            background-color: greenyellow;
            transform: translate3d( 0px, 100px, -500px);
        }
        .box div:nth-child(3) {
            background-color: skyblue;
            transform:  translate3d( 500px, 100px, 0px) rotateY(90deg);
        }
        .box div:nth-child(4) {
            background-color: deeppink;
            transform:  translate3d( -500px, 100px, 0px) rotateY(90deg);
        }
        .box div:nth-child(5) {
            background-color: pink;
            transform:  translate3d( -350px, 100px, 350px) rotateY(-45deg);
        }
        .box div:nth-child(6) {
            background-color: pink;
            transform:  translate3d( 350px, 100px, 350px) rotateY(45deg);
        }
        .box div:nth-child(7) {
            background-color: pink;
            transform:  translate3d( 350px, 100px, -350px) rotateY(135deg);
        }
        .box div:nth-child(8) {
            background-color: pink;
            transform:  translate3d( -350px, 100px, -350px) rotateY(-135deg);
        }
        .box div:nth-child(9) {
            background-color: pink;
            transform:  translate3d( 0px, 500px, 0px) rotateX(90deg);
        }
        .box div:nth-child(10) {
            background-color: pink;
            transform:  translate3d( 0px, -500px, 0px) rotateX(90deg);
        }
        .box div:nth-child(11) {
            background-color: pink;
            transform:  translate3d( 350px, -300px, 0px) rotateY(90deg) rotateX(45deg);
        }
        .box div:nth-child(12) {
            background-color: pink;
            transform:  translate3d( -350px, -300px, 0px) rotateY(90deg) rotateX(-45deg);
        }
        .box div:nth-child(13) {
            background-color: pink;
            transform:  translate3d( -350px, 350px, 0px) rotateY(90deg) rotateX(45deg);
        }
        .box div:nth-child(14) {
            background-color: pink;
            transform:  translate3d( 350px, 350px, 0px) rotateY(90deg) rotateX(-45deg);
        }
        @keyframes move {
            0% {

            }
            /* 100% {
                transform: rotateY(360deg);
            } */
            100% {
                /* transform: rotate3d(1, 1, 0, 360deg); */
                transform: rotateY(360deg);
            }
        }
        @keyframes zhuan {
            0%  {

            }
            100% {
                /* transform: rotate3d(1, -1, 1, 360deg); */
                transform: rotateZ(360deg);
            }
        }
        @keyframes zx {
            0% {

            }
            /* 100% {
                transform: rotateY(360deg);
            } */
            100% {
                transform: rotate3d(1, 1, 0, 360deg);
                /* transform: rotateY(360deg); */
            }
        }
        .box2 {
            position: absolute;
            top: -1000px;
            left: 2200px;
            float: left;
            position: relative;
            margin: 400px auto;
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            text-align: center;
            line-height: 200px;
            transform-style: preserve-3d;
            animation: zhuan 3s linear infinite, zx 3s linear infinite;         
        }
        .box2 div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            /* background: url(media/小女孩.gif) no-repeat ; */
            opacity: 0.8;
            /* z-index: 999; */
            /* border-radius: 50% */
        }
        /* .box2 div:nth-child(1) {
            background-color: pink;
            transform:  translate3d( 0px, 500px, 0px) rotateX(90deg);
        } */
        /* .box2 div:nth-child(9) {
            background-color: pink;
            transform:  translate3d( 0px, 500px, 0px) rotateX(90deg);
        }
        .box2 div:nth-child(10) {
            background-color: pink;
            transform:  translate3d( 0px, -500px, 0px) rotateX(90deg);
        }
        .box2 div:nth-child(11) {
            background-color: pink;
            transform:  translate3d( 350px, -300px, 0px) rotateY(90deg) rotateX(45deg);
        }
        .box2 div:nth-child(12) {
            background-color: pink;
            transform:  translate3d( -350px, -300px, 0px) rotateY(90deg) rotateX(-45deg);
        }
        .box2 div:nth-child(13) {
            background-color: pink;
            transform:  translate3d( -350px, 350px, 0px) rotateY(90deg) rotateX(45deg);
        }
        .box2 div:nth-child(14) {
            background-color: pink;
            transform:  translate3d( 350px, 350px, 0px) rotateY(90deg) rotateX(-45deg);
        } */
    </style>
</head>
<body>
    <div class="box">
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <!-- <div class="box2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
    </div> -->
</body>
</html>